<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 结算单管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 完成结算</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-detail ref="detail_form" v-model="detailForm" :option="option">
        </avue-detail>
        <avue-form ref="form" v-model="form"
                   :option="finishOption">
            <template slot-scope="scope" slot="photoList">
                <div>
                    <div v-for="(item,index) in photoList" class="thumbUrl">
                        <img :src="item.picUrl"/>
                        <div class="hover_show">
                            <i class="el-icon-delete" @click="handlePictureRemove(index)"></i>
                        </div>
                    </div>
                    <div class="select_img" @click="sleImg=true" style="float: left;"><i class="el-icon-plus"></i></div>
                    <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
                        <sel-img-photo-gallery ref="selImg" type="08" @select="onSelectImgs"></sel-img-photo-gallery>
                    </el-dialog>
                </div>
            </template>
            <template slot-scope="scope" slot="menuForm">
                <el-button type="success" @click="handleFinish" :loading="loading">完成结算</el-button>
                <el-button type="primary" @click="goBack">返 回</el-button>
            </template>
        </avue-form>

    </basic-container>
</template>

<script>
    import {normalFinish, readySettlement} from '../../api/bill/settlement';
    import {formOption} from '../../const/crud/bill/form_option/settlement_finish_show';
    import {formOption as finishOption} from '../../const/crud/bill/form_option/settlement_finish_submit';
    import selImgPhotoGallery from '../../components/pds/common/sel_img_photogallery';
    import {goBack} from "../../util/util";

    export default {
        data() {
            return {
                form: {},
                detailForm: {},
                option: formOption,
                finishOption: finishOption,
                photoList: [],
                settleFlag: true,
                submitForm: {
                    settlementSn: '',
                    companyOperator: '',
                    operatorName: '',
                    randomCode: '',
                    payType: '',
                    settlementTime: this.$utils.getDateTime(0),
                    settlementDesc: '',
                    photoList: []
                },
                loading: false,
                sleImg: false
            }
        },
        components: {
            selImgPhotoGallery,
        },
        mounted() {
        },
        created() {
            let params = {
                settlementSn: this.$route.query.res.settlementSn,
                settlementAmount: this.$route.query.res.settlementAmount
            };
            this.handleReady(params);
            this.submitForm.settlementSn = params.settlementSn;
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                let params = {
                    settlementSn: vm.$route.query.res.settlementSn,
                    settlementAmount: vm.$route.query.res.settlementAmount
                };
                vm.submitForm.settlementSn = params.settlementSn;
                vm.handleReady(params);
            });
        },
        methods: {
            onSelectImgs(imgs) {
                imgs.forEach((item) => {
                    this.photoList.push({id: item.id, picUrl: item.picUrl})
                })
                this.sleImg = false;
            },
            // 删除el-upload的图片
            handlePictureRemove(index) {
                this.photoList.splice(index, 1)
            },
            handleReady(params) {
                readySettlement(params).then(response => {
                    if (response.data.code !== 0) {
                        this.goBack(3000);
                    } else {
                        this.settleFlag = response.data.data.settleFlag;
                        this.submitForm.randomCode = response.data.data.randomCode;
                        this.form = response.data.data;
                        this.detailForm = response.data.data;
                        let photoList = response.data.data.photoList;
                        if (photoList) {
                            this.photoList = photoList;
                        }
                        if (!this.form.settlementTime) {
                            this.form.settlementTime = this.submitForm.settlementTime;
                        }
                    }
                    if (!this.settleFlag) {
                        this.$notify.warning({
                            title: '注意',
                            message: '该结算单在30分钟内有准备过结算',
                            duration: '10000'
                        })
                    }
                }).catch(() => {
                    this.goBack();
                });
            },
            handleFinish() {
                this.loading = true;
                let photoList = [];
                this.photoList.forEach(item => {
                    photoList.push(item.id);
                });
                let params = {
                    companyOperator: this.form.companyOperator,
                    operatorName: this.form.operatorName,
                    payType: this.form.payType,
                    settlementTime: this.form.settlementTime,
                    settlementDesc: this.form.settlementDesc,
                    photoList: photoList
                };
                normalFinish(Object.assign({}, this.submitForm, params)).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('结算操作成功');
                        this.goBack();
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            goBack(time = 1000) {
                goBack(this, time);
            }
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }

    .thumbUrl {
        width: 150px;
        height: 150px;
        position: relative;
        line-height: 146px;
        float: left;
        margin-right: 15px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #c0ccda;
        text-align: center;
    }

    .thumbUrl img {
        width: 100%;
        height: 100%;
    }

    .thumbUrl .hover_show {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        display: none;
    }

    .thumbUrl:hover .hover_show {
        display: block;
    }

    .thumbUrl .hover_show i {
        color: #fff;
        margin: 0 10px;
        cursor: pointer;
    }

    .select_img {
        width: 148px;
        height: 148px;
        line-height: 146px;
        border: 1px dashed #c0ccda;
        background-color: #fbfdff;
        font-size: 28px;
        color: #8c939d;
        cursor: pointer;
        border-radius: 6px;
        text-align: center;
    }
</style>


